<!-- usermanage -->
<template>
  <div class="usermanage">
    <div class="new_account">
      <div class="">新建账号</div>
    </div>
    <div class="account_list">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ background: '#F6F6F6' }"
        style="width: 100%; color: #2b2b2b"
      >
        <el-table-column align="center" prop="date" label="用户名" width="151">
        </el-table-column>
        <el-table-column align="center" prop="date" label="权限" width="151">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="最后登录时间"
          width="180"
        >
        </el-table-column>
        <el-table-column align="center" prop="address" label="操作" width="280">
          <el-button type="primary">修改密码</el-button>
          <el-button type="success">权限修改</el-button>
          <el-button type="danger">删除用户</el-button>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
/**
 * @name 用户管理
 */
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      title: ["用户名", "权限", "最后登录事件", "操作"],
      tableData: [
        {
          date: "最后登录事件最后登录事件",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/frame.less";
.usermanage {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 799px;
  height: 573px;
  background: #ffffff;
  padding: 21px 18px 0 18px;
  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.13);
  border-radius: 14px;
  z-index: 9999;
  font-size: 14px;
  font-weight: 600;
  color: #2b2b2b;
  .new_account {
    display: flex;
    justify-content: right;
    margin-bottom: 20px;
    & > div {
      width: 120px;
      height: 40px;
      border: 1px solid #3f3f3f;
      border-radius: 20px;
      .cen();
    }
  }
  .account_list {
  }
}
.el-button {
  padding: 8px !important;
}

.el-button--primary {
  color: #fff;
  background-color: #74a5f7;
  border-color: #74a5f7;
}
// ##
.el-button--success {
  color: #fff;
  background-color: #62ca80;
  border-color: #62ca80;
}
.el-button--danger {
  color: #fff;
  background-color: #ff4444;
  border-color: #ff4444;
}
</style>